<html>
	<head>
		<link rel="stylesheet" href="/style/stylesheet.css" type="text/css" />
		<script type="text/javascript" src="/script/jquery.min.js"></script>
		<script type="text/javascript" src="/script/trimpath-template.js"></script>
		<script type="text/javascript" src="/script/jquery.xml2json.pack.js"></script>
		<script type="text/javascript" src="script/ace.js"></script>
		<script type="text/javascript" src="script/theme-monokai.js"></script>
		<script type="text/javascript" src="script/mode-javascript.js"></script>

		<script type="test" id="template">
			{for item in data}
				<div class="tree-item">
					<div class="tree-item-wrapper"
						style="padding-left: ${level * 20}px;"
						data-path="${item.path}">
						{if item.type == 'dir'}
							<span></span>
						{/if}
						<div style="background-image:url('${item.path}?type=icon&x=${Math.random()}');">
							${item.path.split('/').pop()}
						</div>
					</div>
					<div class="tree-item-children" data-level="${level+1}"></div>
				</div>
			{/for}
		</script>

		<script type="text/javascript">
			$(document).ready(function() {
				var editor = ace.edit("editor");
				editor.setTheme("ace/theme/monokai");
				var JavaScriptMode = require("ace/mode/javascript").Mode;
				editor.getSession().setMode(new JavaScriptMode());
				editor.renderer.setHScrollBarAlwaysVisible(false);

				var sidebar = $('.sidebar');
				var template = $('#template').text();
				template = TrimPath.parseTemplate(template);

				sidebar.dblclick(function(event) {
					var sender = $(event.target);
					if (sender.is('span')) return;
					var target = sender.closest('.tree-item');
					sidebar.trigger('expand', [target]);
				});

				sidebar.mousedown(function(event) {
					var sender = $(event.target);
					var target = sender.closest('.tree-item');
					if (sender.is('span')) {
						sidebar.trigger('expand', [target]);
					} else {
						sidebar.trigger('select', [target]);
					}
				});

				sidebar.bind('expand', function(event, target) {
					target = $('.tree-item-wrapper', target);
					var treeItemChildren = target.next();
					if ($('span', target).hasClass('expanded')) {
						$('span', target).removeClass('expanded');
						treeItemChildren.removeClass('expanded');
					} else {
						$('span', target).addClass('expanded');
						refreshTree(
							target.data('path'),
							treeItemChildren,
							treeItemChildren.data('level')
						);
						treeItemChildren.addClass('expanded');
					}
				});

				sidebar.bind('select', function(event, target) {
					target = $('.tree-item-wrapper', target);
					$('.tree-item-wrapper-selected').removeClass(
						'tree-item-wrapper-selected'
					);
					target.first().addClass('tree-item-wrapper-selected');
				});

				function refreshTree(projectFolder, target, level) {
					if (!level) level = 0;
					$.ajax({url: projectFolder, error: function(response) {
						var data = $.xml2json(response.responseXML);
						target.html(template.process({
							'data': data.entry.length ? data.entry : [data.entry],
							'level': level
						}));
					}});
				}

				function openProject(projectFolder) {
					application.setFilePath(projectFolder.split('file://').pop());
					application.setTitle(projectFolder.split('/').pop());
					refreshTree(projectFolder, $('.sidebar'));
				}

				$('.button').mousedown(function() {
					$(this).addClass('button-pressed');
				}).mouseup(function() {
					$(this).removeClass('button-pressed');
				});

				$('.reloadWindow').click(function() {
					window.location.reload();
				});

				$('.openProjectDialog').click(function() {
					var projectFolder = application.openFolderDialog({
						'title': 'My Super title',
						'directory': '/Users/ruslan/qt/jPath/resources/'
					});
					if (projectFolder.accepted) {
						openProject(projectFolder.files[0]);
					}
				});

				$('.openFileDialog').click(function() {
					var filename = application.openFileDialog({
						'title': 'My Super title',
						'directory': '/Users/ruslan/qt/jPath/resources/'
					});
					if (filename.accepted) {
						$.ajax({url: filename.files[0], error: function(response) {
							editor.getSession().setValue(response.responseText);
							setTimeout(function() { editor.gotoLine(0); }, 0);
						}});
					}
				});

				$('.saveFileDialog').click(function() {
					var filename = application.saveFileDialog({
						'title': 'My Super title',
						'filename': 'fooo',
						'directory': '/Users/ruslan/qt/jPath/resources/'
					});
					if (filename.accepted) {
						alert(filename.files[0]);
					}
				});

				$('.openGlobalModalWindow').click(function() {
					var x = window.top.application.openDialog('test.html');
					alert(x);
				});

				$('.openLocalModalWindow').click(function() {
					window.application.openDialog('test.html');
				});

				openProject('file:///Users/ruslan/');

			});
		</script>
	</head>
	<body>

		<div class="toolbar">
			<div class="toolbar-left">
				<span class="button openProjectDialog"><span><span>
					<div>Open project</div>
				</span></span></span><!--
				--><span class="button openFileDialog"><span><span>
					<div>Open file</div>
				</span></span></span><!--
				--><span class="button saveFileDialog"><span><span>
					<div>Save file</div>
				</span></span></span><!--
				--><span class="button reloadWindow"><span><span>
					<div>Reload</div>
				</span></span></span>
			</div>
			<div class="toolbar-right">
				<span class="button openGlobalModalWindow"><span><span>
					<div>Open global modal window</div>
				</span></span></span><!--
				--><span class="button openLocalModalWindow"><span><span>
					<div>Open local modal window</div>
				</span></span></span>
			</div>
		</div>

		<div class="sidebar">
		</div>

		<pre id="editor">
// show open file dialog when user clicks it
$('.openFileDialog').openFileDialog(function(data, fname) {
	// data - will contain base64 encoded file contents
	// and the fname is the actual filename
	alert([fname, data]);
}, [
	// .js and .txt files only this time
	'*.js', '*.txt'
]);

// same goes for the save file dialog
$('.saveFileDialog').saveFileDialog(function() {
	// simply return file contents and it's name
	return {
		// file contents
		'data': btoa('HELLO'),
		// desired filename
		'filename': fileName
	};
});
		</pre>

		<div class="statusbar">10092 items are loaded</div>

	</body>
</html>